<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Document</title>
<script src="assets/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<!--原人员树通用库-->
<script src="assets/js/common-ui.js" type="text/javascript" charset="utf-8"></script>
<!--滚动条-->
<script src="assets/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<!--树状图核心库-->
<script src="assets/js/zTree/jquery.ztree.core.min.js" type="text/javascript" charset="utf-8"></script>
<!--多选框拓展-->
<script src="assets/js/zTree/jquery.ztree.excheck.min.js" type="text/javascript" charset="utf-8"></script>
<!--隐藏拓展-->
<script src="assets/js/zTree/jquery.ztree.exhide.min.js" type="text/javascript" charset="utf-8"></script>
<!--页面独立树状图生成及操作函数-->
<script src="assets/js/function.zTree.js" type="text/javascript" charset="utf-8"></script>
<!--移动端touch事件-->
<script src="assets/js/touch.min.js" type="text/javascript" charset="utf-8"></script>
<!--树状图原生样式表-->
<link rel="stylesheet" type="text/css" href="assets/css/zTreeStyle/zTreeStyle.css"/>
<!--原树状图通用样式类-->
<link rel="stylesheet" type="text/css" href="assets/css/common.css"/>
<!--新版树状图样式-->
<link rel="stylesheet" type="text/css" href="assets/css/OAzTree.css"/>
<style type="text/css"></style>
<script type="text/javascript">
$(document).ready(function() {
	//从接口获取TAB组信息
	$.ajax({
		//测试用本地json数据
		url: './debugData/getTreeGroupDebug.json?t=' + new Date().getTime(),
		dataType: "json",
		async:false,
		success: function(data) {
			if(data.length>0){
				//存储分组信息
				_globalObject.groupList = data;
				_globalObject.nodeCache = {};
				//生成tab标签组
				createTabsHtml(data);
				//绑定tab切换事件
				$('.tw-tabs-nav').find('[data-tab-idx]').click(function(){
					var tab_idx = $(this).attr('data-tab-idx');
					var $zTreeObj = $('.tw-tab-panel[data-tab-idx='+tab_idx+']').find('.ztree'); 
					if( $zTreeObj.length > 0 ){
						dataRelation($zTreeObj.attr('id'));
					}else{
						alert('tab切换数据联动异常');
					}
				})
				//获取每个tab标签下的节点json
				$.each(data, function(i,e){
					$.ajax({
						url:addUrlPara(e.apiUrl,'t', new Date().getTime()),//加上随机参数
						dataType: "json",
						async: false,
						success: function(chilData){
							if(chilData.length>0){
								//测试==>>重组了json//缓存起来
								_globalObject.nodeCache[e.domId] = reBuildJson(chilData,[]);
								
								//$('body').append('<code>'+JSON.stringify(_globalObject.nodeCache[e.domId])+'</code>');
							}else{
								alert(e.name+'人员数据拉取异常');
							}
						}
					})
				})
				//创建树结构
				$.each(data, function(i,e){
					var t = $("#"+e.domId);
					var setting = {
						check: {
							enable: true//开启多选框
						},
						data: {
							simpleData: {
								enable: true//json格式化
							}
						},
						view: {
							dblClickExpand: false,//关闭双击事件
							expandSpeed: '',//取消展开动画
							autoCancelSelected: false,
							selectedMulti: false
						},
						callback: {
							onClick: nodeOnClick,//点击事件
							onCheck: nodeOnCheck//checkbox事件
						}
					};
					var zNodes = _globalObject.nodeCache[e.domId];
					t = $.fn.zTree.init(t, setting, zNodes);
				})
				//console.log(JSON.stringify(_globalObject.nodeCache['ownOrg']));
				//绑定移动端hold长按事件
				if(_globalObject.isMobiles){
					touch.on('.ztree li a span', 'touchstart touchend hold', function(ev){
						//阻止默认行为
						if(ev.type=='touchstart'){
							ev.preventDefault();
							_globalObject.touchStartTime = ev.timeStamp;
						}
						//判断时长，若小于长按，则触发点击事件
						if(ev.type=='touchend'){
							_globalObject.touchEndTime = ev.timeStamp;
							var t = _globalObject.touchEndTime - _globalObject.touchStartTime;
							if(t<650){
								touch.trigger(ev.target, 'click');
							}
						}
						//长按事件，获取父级li标签id，获取node，触发check事件
						if(ev.type=='hold'){
							var obj = $(ev.target).parentsUntil('.ztree').parent('.ztree');
							if(obj.length>0){
								var zTree = $.fn.zTree.getZTreeObj(obj.attr('id'));
								var tObj = $(ev.target).parentsUntil('li').parent('li');
								if(tObj.length>0){
									var tId = tObj.attr('id');
									var ckNode = zTree.getNodeByTId(tId);
									if(ckNode!==null){
										zTree.checkNode(ckNode, null, true, true);
									}else{
										alert('tId node is null');
									}
								}else{
									alert('tId is null');
								}
							}else{
								alert('hold error');
							}
						}
					});
				}
			}else{
				alert('分组信息接口异常');
			}
	    }
	});
});
</script>
</head>
<body>
<div class="tw-usertree-choice clearfix" style="height: auto">
	<div class="tw-usertree-wrap" style="/*width: 96%;*/background: #fff;padding:0;padding-bottom:20px;">
		<div class="tw-usertree-tabs">
			<ul class="tw-tabs-nav">
	            
	        </ul>
	        <div class="tw-tabs-bd">
	            
	        </div>
		</div>
	</div>
	<div class="tw-usertree-select" style="/*display: none;*/">
		<div class="tw-mod">
			<div class="tw-hd">已经选择 <span>(<b id="countNum">0</b>)</span><span class="tw-act" onclick="delAll()">清除全部</span></div>
			
			<div class="tw-bd" id='JS_selectBox'>
				<div class="JS_scroll">
					<ul class="tw-usertree-list">
						
					</ul>
					<ul class="tw-usertree-deplist" style="display:none">
					</ul>
				</div>
			</div>
			
			<div>
				<select id="oldSelect" size="20" style="display:none;width:100%;height: 290px;border: 1px dashed #C2C2C2" multiple="multiple"></select>
				<select id="depSelect" size="20" style="display:none; " multiple="multiple"></select>
			</div>
		</div>
	</div>
</div>
<div class="tw-search-bar tar">
    <div class="tw-top-tool">
        <div class="tw-btn-primary" style="cursor:pointer" onclick="save();">
            <i class="tw-icon-save"></i> 确认选择
        </div>
        <div class="tw-btn" style="cursor:pointer" onclick="closeSelfLayer();">
            <i class="tw-icon-remove"></i> 取消选择
        </div>
    </div>
</div>
<script type="text/javascript">
	
	//
	function editGroup(){
		//location.href = '${ctx}/departmentTree_toSetUserGroup.do';
		location.href = 'SetUserGroup.html';
	}
</script>
</body>
</html>
